<template>
    <div class="home-container"  v-loading.fullscreen.lock="fullscreenLoading" element-loading-background="rgba(0, 0, 0, 0.8)">
        <container-item title="主动预警" hasNav>

            <div style="width: 100%; height: 100%">
                <div class="top">
                    <div class="top_left">
                    </div>
                    <menu-element />
                </div>
                <div class="home">
                    <div class="home_item" v-for="item in listData" :key="item.name">
                        <div class="home_item_title">
                            <img src="@/assets/images/sec-icon.png" alt="">
                            <span>{{ item.name }}</span>
                        </div>
                        <div v-for="(subItem, index) in item.hlf" :key="index" class="home_item_sub"
                            :class="subItem.name === '正极' ? 'home_item_sub_zheng' : 'home_item_sub_fu'">
                            <div class="subitem_left">
                                <div v-if="subItem.state === 0" class="subitem_left_lv_bg subitem_left_bg">
                                    <div class="subitem_left_state">健康</div>
                                    <div class="subitem_left_title">换流阀状态</div>
                                </div>
                                <div v-if="subItem.state === 1" class="subitem_left_huang_bg subitem_left_bg">
                                    <div class="subitem_left_state">异常</div>
                                    <div class="subitem_left_title">换流阀状态</div>
                                </div>
                                <div v-if="subItem.state === 2" class="subitem_left_hong_bg subitem_left_bg">
                                    <div class="subitem_left_state">严重</div>
                                    <div class="subitem_left_title">换流阀状态</div>
                                </div>

                            </div>
                            <div class="subitem_right">
                                <div class="subitem_right_name">{{ subItem.name }}换流阀</div>
                                <div class="subitem_right_value_box">
                                    <div class="subitem_right_value">
                                        <div class="subitem_right_value_title">•桥臂健康比例</div>
                                        <div v-if="subItem.r1 <= 20"
                                            class="subitem_right_value_value_hong subitem_right_value_value">{{
                                                subItem.r1 }}%</div>
                                        <div v-if="subItem.r1 <= 60 && subItem.r1 > 20"
                                            class="subitem_right_value_value_huang subitem_right_value_value">{{
                                                subItem.r1 }}%</div>
                                        <div v-if="subItem.r1 > 60"
                                            class="subitem_right_value_value_lv subitem_right_value_value">{{ subItem.r1
                                            }}%</div>
                                    </div>
                                    <div class="subitem_right_value">
                                        <div class="subitem_right_value_title">•子模块健康比例</div>
                                        <div v-if="subItem.r2 <= 20"
                                            class="subitem_right_value_value_hong subitem_right_value_value">{{
                                                subItem.r2 }}%</div>
                                        <div v-if="subItem.r2 <= 60 && subItem.r2 > 20"
                                            class="subitem_right_value_value_huang subitem_right_value_value">{{
                                                subItem.r2 }}%</div>
                                        <div v-if="subItem.r2 > 60"
                                            class="subitem_right_value_value_lv subitem_right_value_value">{{ subItem.r2
                                            }}%</div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>

            </div>


        </container-item>

    </div>
</template>

<script>
import ContainerItem from "@/components/ContainerItem.vue";
import MenuElement from "@/components/MenuElement/index.vue";

import { getZdyjOverviewHealthRatio } from '@/api/HomeApi/index.js';



export default {
    name: "",
    components: {
        ContainerItem,
        MenuElement
    },
    data() {
        return {
            listData: [],
            loading: false,
            fullscreenLoading: false
        };
    },
    created() {
        this.handleFun()
    },
    mounted() {

    },
    methods: {
        handleFun() {
            this.fullscreenLoading = true;
            getZdyjOverviewHealthRatio().then(res => {
                if (res.code === 200) {
                    this.listData = res.data;

                } else {
                    this.$message.error(res.msg);
                }
                this.fullscreenLoading = false;
            }).catch(err => {
                console.error(err);
                this.$message.error("获取数据失败，请稍后重试");
                this.fullscreenLoading = false;
            });
            // this.fullscreenLoading = false;
        }
    }

};
</script>

<style scoped lang="less">
.home-container {
    .top {
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #fff;

        .fanhui-btn {
            cursor: pointer;

            span {
                margin-left: 5px;
            }
        }

        .lujing {
            margin-left: 50px;
        }
    }

    .home {
        display: flex;
        justify-content: space-between;
        gap: 20px;

        .home_item {
            flex: 1;
            background: linear-gradient(266deg, #1E2F34 0%, #142126 100%);
            border: 1px solid #006686;

            .home_item_title {
                height: 56px;
                display: flex;
                align-items: center;
                font-size: 18px;
                color: #FFFFFF;
                padding: 0 20px;
                box-sizing: border-box;

                img {
                    width: 30px;
                    height: 20px;
                }
            }

            .home_item_sub {
                // width: 546px;
                height: 296px;
                margin: 0 15px;
                display: flex;
                align-items: center;
                margin-bottom: 20px;

                .subitem_left {
                    width: 220px;
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    .subitem_left_bg {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        flex-direction: column;

                        .subitem_left_state {
                            font-size: 33px;
                            margin-bottom: 20px;
                        }

                        .subitem_left_title {
                            font-size: 18px;
                        }
                    }

                    .subitem_left_hong_bg {
                        width: 194px;
                        height: 157px;
                        background: url('~@/assets/images/home/hong.png');
                        background-size: 100% 100%;

                        .subitem_left_state {
                            color: #EE3536;
                        }

                        .subitem_left_title {
                            color: #FFC9C9;
                        }
                    }

                    .subitem_left_huang_bg {
                        width: 194px;
                        height: 157px;
                        background: url('~@/assets/images/home/huang.png');
                        background-size: 100% 100%;

                        .subitem_left_state {
                            color: #FFAA00;
                        }

                        .subitem_left_title {
                            color: #FFF2C9;
                        }
                    }

                    .subitem_left_lv_bg {
                        width: 194px;
                        height: 157px;
                        background: url('~@/assets/images/home/lv.png');
                        background-size: 100% 100%;

                        .subitem_left_state {

                            color: #06F564;
                        }

                        .subitem_left_title {
                            color: #C9FFE2;
                        }
                    }
                }

                .subitem_right {
                    display: flex;
                    // align-items: center;
                    justify-content: center;
                    flex-direction: column;

                    .subitem_right_name {
                        font-size: 24px;
                        color: #FFFFFF;
                        margin-bottom: 20px;
                    }

                    .subitem_right_value_box {
                        display: flex;
                        align-items: center;

                        .subitem_right_value {
                            margin-right: 20px;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            flex-direction: column;

                            .subitem_right_value_title {
                                font-size: 18px;
                                color: #326678;
                                margin-bottom: 10px;
                            }

                            .subitem_right_value_value_hong {
                                color: #EE3536;
                                background: url('~@/assets/images/home/hong-xian.png') no-repeat center bottom;
                            }

                            .subitem_right_value_value_lv {
                                color: #06F564;
                                background: url('~@/assets/images/home/lv-xian.png') no-repeat center bottom;

                            }

                            .subitem_right_value_value_huang {
                                color: #FFAA00;
                                background: url('~@/assets/images/home/huang-xian.png') no-repeat center bottom;
                            }

                            .subitem_right_value_value {
                                font-size: 28px;
                                height: 50px;
                                width: 50px;
                                background-size: 100% 20px;

                            }
                        }
                    }
                }
            }

            .home_item_sub_zheng {
                background: url('~@/assets/images/home/bg-shang.png');
                background-size: 100% 100%;
            }

            .home_item_sub_fu {
                background: url('~@/assets/images/home/bg-xia.png');
                background-size: 100% 100%;
            }
        }
    }
}
</style>
